<template>
	<view class="p-12 static">
		<view class="fixed h-screen w-screen" style="z-index: -100; background: linear-gradient(to bottom, white 0%, #E2F2FD 40%, #4BBDFF 100%); top: 0; left:0"></view>
		<view class="w-full px-10">
			<view class="text-18">总发放金额</view>
			<view class="flex flex-row align-items-center py-20">
				<image class="" style="width: 54rpx; height: 54rpx;" src="/static/amount.png"></image>
				<view class="text-24 text-bold">￥{{userInfo.expense}}</view>
			</view>
		</view>
		<view class="border-1 rounded-base bg-white" style="border-color: #BBB; margin-top: 40rpx; min-height: 70vh;">
			<view class="bottom-line">
				<view class="flex flex-row text-14 align-items-center mx-12 text-bold" style="height: 86rpx;">
					任务结算记录
				</view>
			</view>
			<view v-for="item in list" class="bottom-line py-5" style="color: #7d7d7d;">
				<view v-if="type=1" class="flex flex-row text-14 align-items-center mx-12" style="line-height: 45rpx;">
					<view class="flex-1">{{item.task.name}}</view>
					<view class="">{{item.task.category_name}}</view>
				</view>
				<view class="flex flex-row text-14 align-items-center mx-12" style="line-height: 45rpx;">
					<view class="flex-1">结算时间：{{item.create_at}}</view>
					<view class="text-bold text-15">￥{{item.amount}}</view>
				</view>
			</view>
		</view>
		<view class="text-14 text-center my-10" style="color: #000"> ~ 暂无更多记录 ~ </view>
	</view>
</template>

<script>
	import request from '/utils/request.js';
	import { mapState, mapMutations } from 'vuex'
	export default {
		data() {
			return {
				list: [],
				page: 1,
				has_more: true
			}
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		onLoad() {
			
		},
		onShow() {
			this.getList(true);
		},
		onReachBottom() {
			this.getList();
		},
		onShareAppMessage() {
			return {
			  title: '飞兔企业版',
			  path: '/pages/task/index',
			  // imageUrl : ''
			}
		},
		onShareTimeline() {
			return {
			  title: '飞兔企业版',
			  // query: '',
			  // imageUrl : ''
			}
		},
		methods: {
			...mapMutations(['login', 'setUserInfo']),
			// 获取支出记录
			getList(force = false){
				if(force) {
					this.page = 1;
					this.has_more = true;
				};
				if(!this.has_more) return;
				request.post('/merchant/expenseList', {
					page: this.page,
					limit: 20,
				}).then(res=>{
					this.list = force ? res.list : this.list.concat(res.list);
					this.has_more = res.has_more;
					this.page = res.page + 1;
				})
			},
			navigateTo($url){
				uni.navigateTo({
					'url': $url
				})
			}
		}
	}
</script>

<style>
	.bottom-line{
		border-bottom: 1px solid #bbb;
	}
</style>
